<template>
  <div>
    <el-card class="card">
      <div slot="header" class="header">
        <el-steps :active="steps">
          <el-step
            v-for="(item, index) in stepList"
            :key="index"
            :title="item.name"
            :description="item.time ? item.time : ''"
          ></el-step>
        </el-steps>
      </div>

      <div class="orderInfo">
        <div class="title">
          订单信息:
          <span style="margin-left: 10px">
            <el-tag
              v-if="status === 0"
              type="danger"
              size="small"
              effect="dark"
            >
              待付款
            </el-tag>
            <el-tag
              v-else-if="status === 1"
              size="small"
              type="warning"
              effect="dark"
              >待发货</el-tag
            >
            <el-tag v-else-if="status === 2" size="small"> 已发货 </el-tag>
            <el-tag v-else-if="status === 3" size="small" effect="dark"
              >已完成</el-tag
            >
            <el-tag
              v-else-if="status === 4"
              size="small"
              type="info"
              effect="dark"
              >已关闭</el-tag
            >
            <el-tag v-else type="info" size="small"> 无效订单 </el-tag>
          </span>
        </div>
        <div class="main">
          <el-row class="order-main">
            <el-col
              :span="6"
              v-for="(item, index) in orderInfoList"
              :key="index"
              class="item"
            >
              <span>{{ item.name }}:</span>
              <span class="text">{{ item.info }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="title">收货人信息:</div>
      <div class="main">
        <el-row class="order-main">
          <el-col
            :span="6"
            v-for="(item, index) in consigneeList"
            :key="index"
            class="item"
          >
            <span>{{ item.name }}:</span>
            <span class="texts">{{ item.info }}</span>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <div class="title">商品信息:</div>
      <div class="mains">
        <el-table :data="orderItems" border style="width: 100%">
          <el-table-column fixed prop="productName" label="商品名称">
          </el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img :src="scope.row.productPic" alt="" class="pic" />
            </template>
          </el-table-column>
          <el-table-column label="是否退货">
            <template slot-scope="scope">
              <div v-if="scope.row.isReturn == 0">否</div>
              <div v-else style="color:red"  @click="goback(scope.row)">是</div>
            </template>
          </el-table-column>
          <el-table-column prop="productBrand" label="品牌"> </el-table-column>
          <el-table-column prop="productPrice" label="价格"> </el-table-column>
          <el-table-column prop="productQuantity" label="商品数量">
          </el-table-column>
          <el-table-column fixed="right" label="小计" prop="totalPrice">
          </el-table-column>
        </el-table>
      </div>
      <el-divider></el-divider>
      <div class="title">费用信息：</div>
      <div class="main">
        <el-row :gutter="10" class="order-main">
          <el-col :span="6" v-for="(item, index) in costList" :key="index">
            <span>{{ item.name }}:</span>
            <span class="cost">{{ item.info }}</span>
          </el-col>
        </el-row>
        <!-- 发快递 -->
        <div  class="table">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"

          :inline="false"

        >
          <el-row v-if="status === 1"  >
            <el-col :span="6" :offset="0">
              <el-form-item prop="deliveryCompany" label="物流公司">
                <el-select
                  v-model="form.deliveryCompany"
                  class="myInput"
                  size="mini"
                  placeholder="请选择物流公司"
                  clearable
                >
                  <el-option
                    v-for="(item,index) in options"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item prop="deliverySn" label="物流单号">
                <el-input
                  v-model="form.deliverySn"
                  placeholder="请输入物流单号"
                  size="mini"
                  class="ipts"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="email" v-if="status>1">
          <div class="title">物流信息： <span
              style="color: gray"
            >{{ orderBase.deliveryCompany }} [
              {{ orderBase.deliverySn }} ]</span></div>
           <el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(item, index) in email"
      :key="index"
      :timestamp="item.AcceptTime">
      {{item.AcceptStation+item.Remark}}
    </el-timeline-item>
  </el-timeline>
        </div>
        <div class="btns">
          <el-button type="primary" @click="sendOrder('form')"  v-if="status === 1">确认发货</el-button>
          <div v-if="status===2">
            <el-button type="primary" v-if="orderReturn" @click="force">强制确认收货</el-button>
          </div>
          <div v-if="status===3">
            <el-button type="primary" @click="close">关闭订单</el-button>
          </div>
        </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { orderDetail,sendDone,forceRevice,closeOrder} from "@/api/order";
import email from './email.json'
export default {
  props: {},
  data() {
    return {
      orderReturn:true,
       reverse: true,
      id: "",
      orderBase: {},
      orderItems: [],
      status: 0,
      stepList: [
        { name: "待付款" },
        { name: "待发货" },
        { name: "已发货" },
        { name: "已完成" },
        { name: "已关闭" },
      ],
      orderInfoList: [],
      consigneeList: [],
      costList: [],
      options: [
                {
                    id: 0,
                    name: '顺丰快递'
                },
                {
                    id: 1,
                    name: '韵达快递'
                },
                {
                    id: 2,
                    name: '中国邮政'
                },
                {
                    id: 3,
                    name: '申通快递'
                },
                {
                    id: 4,
                    name: '中通快递'
                }
            ],
            form: {
                deliverySn: '',
                deliveryCompany: ''
            },
            rules: {
                deliveryCompany: [
                    {
                        required: true,
                        message: '请填写物流公司',
                        trigger: 'change'
                    }
                ],
                deliverySn: [
                    {
                        required: true,
                        message: '请填写物流单号',
                        trigger: 'blur'
                    }
                ]
            },
    };
  },
  computed: {
    steps() {
      return this.status + 1;
    },
    email(){
      return email.Traces
    }
  },
  created() {
    this.id = this.$route.query.ids;
    this.init();
    console.log(this.id)
    // console.log(this.email)
  },
  mounted() {},
  watch: {},
  methods: {
    init() {
      orderDetail(this.id).then((res) => {
        console.log(res)
        if (res.success) {
          // console.log(res);
          this.orderBase = res.data.orderDetail.orderBase;
          this.orderItems = res.data.orderDetail.orderItems;
          console.log( this.orderItems)
          this.setstepList();
          this.getOrderInfo();
          this.getconsignee();
          this.getcostList();
          this.getReturn()
          // console.log(this.orderItems)
        }
      });
    },
    setstepList() {
      this.stepList[0].time = this.orderBase.createTime; //待付款
      this.stepList[1].time = this.orderBase.paymentTime; //待发货
      this.stepList[2].time = this.orderBase.deliveryTime; //已发货
      this.stepList[3].time = this.orderBase.receiveTime; //已完成
      this.stepList[4].time = this.orderBase.finishTime; //已关闭
      this.status = this.orderBase.status; //状态
    },
    getOrderInfo() {
      this.orderInfoList = [
        {
          name: "订单金额",
          info: this.orderBase.totalAmount,
        },
        {
          name: "订单编号",
          info: this.orderBase.orderSn,
        },
        {
          name: "用户账户",
          info: this.orderBase.memberUsername,
        },
        {
          name: "备注",
          info: this.orderBase.note,
        },
        {
          name: "下单时间",
          info: this.orderBase.createTime,
        },
        {
          name: "付款时间",
          info: this.orderBase.paymentTime,
        },
        {
          name: "发货时间",
          info: this.orderBase.deliveryTime,
        },
        {
          name: "收货时间",
          info: this.orderBase.receiveTime,
        },
      ];
    },
    getconsignee() {
      this.consigneeList = [
        {
          name: "收货人",
          info: this.orderBase.receiverName,
        },
        {
          name: "用户姓名",
          info: this.orderBase.memberUsername,
        },
        {
          name: "手机号码",
          info: this.orderBase.receiverPhone,
        },
        {
          name: "邮政编码",
          info: this.orderBase.receiverPostCode,
        },
        {
          name: "地址",
          info: this.orderBase.receiverProvince + this.orderBase.receiverCity,
        },
        {
          name: "详细地址",
          info: this.orderBase.receiverRegion,
        },
      ];
    },
    getcostList() {
      this.costList = [
        {
          name: "运费金额",
          info: 0,
        },
        {
          name: "订单总金额",
          info: this.orderBase.totalAmount,
        },
        {
          name: "实际金额",
          info: this.orderBase.payAmount,
        },
        {
          name: "促销优化金额",
          info: 0,
        },
      ];
    },
    // 确认发货
    sendOrder(formName){

      this.$refs[formName].validate((valid) => {
          if (valid) {
            sendDone({
        orderId:this.id,
        deliverySn:this.form.deliverySn,
        deliveryCompany:this.form.deliveryCompany

      }).then(res=>{
       if(res.success){
         this.$message.success('成功发货，您的宝贝正在路上')
         this.$router.push({path:"/order/list"})
       }
      })
          } else {
            this.$message.error('请正确填写订单号')
            return false;
          }
        });
    },
    // 判断强制收货
    getReturn(){
      this.orderItems.forEach(el=>{
        if(el.isReturn===0){
          this.orderReturn=false
        }
      })
    },
    //跳转到退单界面
    goback(el){

       if(el.isReturn===1){
         this.$router.push({path:'/order/back/detail/',query:{ids:el.returnId}})

     }
    },
    // 强制确认收货
    force(){
      this.orderItems.forEach(el=>{
        if(el.isReturn!==0){
          forceRevice(this.id).then(res=>{
        if(res.success){
          this.$message.success('强制确认收货成功')
           this.$router.push({path:"/order/list"})
        }
       })
        }else{
          this.orderReturn=false
        }
      })

    },
    //关闭订单
    close(){
      closeOrder(this.id).then(res=>{
        if(res.success){
          this.$message.success('关闭订单成功')
            this.$router.push({path:"/order/list"})
        }
      })
    }

  },
  components: {},
};
</script>

<style lang="scss" scoped>
.header {
  width: 85%;
  margin: 0 auto;
  margin-top: 30px;
}
.title {
  font-weight: 700;
}
.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.order-main {
  width: 100%;
  margin-top: 30px;
  span {
    line-height: 40px;
    font-size: 14px;
  }
  .text,
  .texts,
  .cost {
    margin-left: 10px;
  }
  .cost {
    color: red;
  }
}
.item:nth-child(1) .text {
  color: red;
}
.mains {
  margin-top: 30px;
}
.pic {
  width: 100px;
  height: 100px;
}
.table{
  width: 100%;
}
.ipts{
  width: 70%;
}
.btns{
    margin: 40px auto;
    display: flex;
    width: 100%;
    justify-content: center;
}
.email{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
</style>
